<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + '网关服务路由定义'">
      <el-button size="small" @click="$router.push('/sys/gateway-route-define/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">
          <template #header>
            <span>基本信息</span>
          </template>


          <div>
            <kv label="应用名">
              <el-input v-model="info.name" chk="*"/>
            </kv>

            <kv label="阻断服务">
              <el-switch v-model="info.isBlock"/>
            </kv>

            <template v-if="!info.isBlock">
              <kv label="目标服务">
                <el-input v-model="info.target" chk="*"/>
              </kv>

<!--              <kv label="加密路径前缀">-->
<!--                <el-input v-model="info.mappingPrefix" chk="?reg:\w+"/>-->
<!--              </kv>-->
<!--              <kv label="加密key">-->
<!--                <el-input v-model="info.mappingKey" chk="?reg:\w+"/>-->
<!--              </kv>-->

<!--              <kv label="加密路径分段长度">-->
<!--                <el-input v-model="info.mappingPathLength" placeholder="超过该长度后，进行分段。为0表示不分段"/>-->
<!--              </kv>-->
<!--              <kv label="加密路径分段步长">-->
<!--                <el-input v-model="info.mappingPathStep" placeholder="分段的步长，默认为0"/>-->
<!--              </kv>-->

            </template>

            <kv label="remark">
              <el-input v-model="info.remark" type="textarea"/>
            </kv>
          </div>

        </el-card>
      </el-col>
<!--      <el-col :span="12" v-if="!info.isBlock && $props.id">-->
<!--        <el-tabs type="border-card">-->
<!--          <el-tab-pane label="加密">-->
<!--            <div style="background-color: #98e6cb;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv label="path" kStyle="flex:1">-->
<!--                <el-input v-model="$data.encrypt.path">-->
<!--                  <template #append>-->
<!--                    <el-button @click="encrypt_path_click()"> 加密⤵</el-button>-->
<!--                  </template>-->
<!--                </el-input>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" v-html="$data.encrypt_result.path"></div>-->
<!--            </div>-->

<!--            <div style="background-color: #98e6cb;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv label="jsonKey" kStyle="flex:1">-->
<!--                <el-input v-model="$data.encrypt.json_key">-->
<!--                  <template #append>-->
<!--                    <el-button @click="encrypt_json_key_click()"> 加密⤵</el-button>-->
<!--                  </template>-->
<!--                </el-input>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" v-html="$data.encrypt_result.json_key"></div>-->
<!--            </div>-->

<!--            <div style="background-color: #98e6cb;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv kStyle="flex:1">-->
<!--                <template #k>-->
<!--                  <div style="display: flex;flex-direction: column;align-items: center;">-->
<!--                    Json:-->
<!--                    <div style="margin: auto;text-align: center;">-->
<!--                      <el-button @click="encrypt_json_click()"> 加密⤵</el-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </template>-->
<!--                <el-input v-model="$data.encrypt.json" type="textarea" rows="4"/>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" v-html="$data.encrypt.json"></div>-->
<!--            </div>-->

<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="解密">-->
<!--            <div style="background-color: #98bfe6;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv label="path" kStyle="flex:1">-->
<!--                <el-input v-model="$data.decrypt.path">-->
<!--                  <template #append>-->
<!--                    <el-button @click="decrypt_path_click()"> 解密⤵</el-button>-->
<!--                  </template>-->
<!--                </el-input>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" c></div>-->
<!--            </div>-->

<!--            <div style="background-color: #98bfe6;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv label="jsonKey" kStyle="flex:1">-->
<!--                <el-input v-model="$data.decrypt.json_key">-->
<!--                  <template #append>-->
<!--                    <el-button @click="decrypt_json_key_click()"> 解密⤵</el-button>-->
<!--                  </template>-->
<!--                </el-input>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" v-html="$data.decrypt_result.json_key"></div>-->
<!--            </div>-->

<!--            <div style="background-color: #98bfe6;border-radius: 5px;padding:10px;margin-bottom:20px;">-->
<!--              <kv kStyle="flex:1">-->
<!--                <template #k>-->
<!--                  <div style="display: flex;flex-direction: column;align-items: center;">-->
<!--                    Json:-->
<!--                    <div style="margin: auto;text-align: center;">-->
<!--                      <el-button @click="decrypt_json_click()"> 解密⤵</el-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </template>-->
<!--                <el-input v-model="$data.decrypt.json" type="textarea" rows="4"/>-->
<!--              </kv>-->

<!--              <div style="border: dashed 1px gray; padding:5px;" v-html="$data.decrypt_result.json"></div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>
<style scoped lang="scss">
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2022-07-06 10:21:17
 */
import clusterRef from "../../dev/cluster-info/cluster-info-ref.vue"

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  "info": {"lb": true, "tripe": true, "cluster": {}},
  encrypt: {
    path: "",
    json_key: "",
    json: "",
  },
  encrypt_result: {
    path: "",
    json_key: "",
    json: "",
  },


  decrypt: {
    path: "",
    json_key: "",
    json: ""
  },
  decrypt_result: {
    path: "",
    json_key: "",
    json: ""
  }
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


// const encrypt_path_click = () => {
//   jv.$http.post("/open/gateway/encrypt_path", {id: $props.id, value: $data.encrypt.path}).then((res) => {
//     $data.encrypt_result.path = res.data.data;
//   })
// }
//
// const encrypt_json_key_click = () => {
//   jv.$http.post("/open/gateway/encrypt_json_key", {id: $props.id, value: $data.encrypt.json_key}).then((res) => {
//     $data.encrypt_result.json_key = res.data.data;
//   })
// }
// const encrypt_json_click = () => {
//   jv.$http.post("/open/gateway/encrypt_json", {id: $props.id, value: $data.encrypt.json}).then((res) => {
//     $data.encrypt_result.json = res.data.data;
//   })
// }
//
// const decrypt_path_click = () => {
//   jv.$http.post("/open/gateway/decrypt_path", {id: $props.id, value: $data.decrypt.path}).then((res) => {
//     $data.decrypt_result.path = res.data.data;
//   })
// }
//
// const decrypt_json_key_click = () => {
//   jv.$http.post("/open/gateway/decrypt_json_key", {id: $props.id, value: $data.decrypt.json_key}).then((res) => {
//     $data.decrypt_result.json_key = res.data.data;
//   })
// }
// const decrypt_json_click = () => {
//   jv.$http.post("/open/gateway/decrypt_json", {id: $props.id, value: $data.decrypt.json}).then((res) => {
//     $data.decrypt_result.json = res.data.data;
//   })
// }


const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const loadData = async function () {
  if (!$props.id) return;
  var res = await jv.$http.post("/sys/gateway-route-define/detail/" + $props.id)
  $data.info = res.data.data;
};
const save_click = async function () {
//校验
  if (jv.chk_main($data) == false) {
    return;
  }
  var res = await jv.$http.post("/sys/gateway-route-define/save", $data.info)
//[axios拦截器中已处理了异常]。
  jv.info(action_name + " 成功");
  if ($props.action == "add") {
    var id = res.data.data
    jv.$router.push("/sys/gateway-route-define/edit/" + id)
  } else if ($props.action == "edit") {
    jv.$router.push("/sys/gateway-route-define/list")
  }
};

onMounted(function () {
  loadData();
})
</script>
